<template
  ><div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>分类管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 第一行 -->
      <el-row>
        <el-col>
          <el-button type="primary" @click="showAddCateDialog"
            >添加分类</el-button
          >
        </el-col>
      </el-row>

      <!-- 分类表格 -->
      <tree-table
        :data="cateList"
        :columns="cols"
        :selection-type="false"
        :expand-type="false"
        show-index
        index-text="#"
        border
        :show-row-hover="false"
      >
        <!-- 是否有效 列模板 -->
        <template slot="isOk" slot-scope="scope">
          <i
            class="el-icon-error"
            v-if="scope.row.car_deleted === false"
            style="color:red"
          ></i>
          <i class="el-icon-success" v-else style="color:lightGreen"></i>
        </template>
        <!-- 排序 列模板 -->
        <template slot="order" slot-scope="scope">
          <el-tag v-if="scope.row.cat_level == 0">一级菜单</el-tag>
          <el-tag v-else-if="scope.row.cat_level == 1" type="success"
            >二级菜单</el-tag
          >
          <el-tag v-else type="danger">三级菜单</el-tag>
        </template>
        <!-- 操作 列模板 -->
        <template slot="opt">
          <el-button type="primary" size="mini" icon="el-icon-edit"
            >编辑</el-button
          >
          <el-button type="danger" size="mini" icon="el-icon-delete"
            >删除</el-button
          >
        </template>
      </tree-table>

      <!-- 页码条区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryData.pagenum"
        :page-sizes="[3, 5, 10, 20]"
        :page-size="queryData.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

      <!-- 添加分类对话框 -->

      <el-dialog
        title="添加分类"
        @close="resetCateForm"
        :visible.sync="isAddCateDialogShow"
        width="50%"
      >
        <!-- 内容区 -->
        <el-form
          ref="formAddCate"
          :model="addCateForm"
          :rules="addCateRules"
          label-width="80px"
        >
          <!-- 表单项目 -->
          <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="addCateForm.cat_name"></el-input>
          </el-form-item>
          <!-- 表单项目  父级分类 -->
          <el-form-item label="父级分类">
            <!-- options 用来指定数据源 -->
            <!-- props 用来指定配置对象 -->
            <el-cascader
              v-model="selectedCates"
              clearable
              :options="AddcateList"
              :props="{
                checkStrictly: true,
                expandTrigger: 'hover',
                value: 'cat_id',
                label: 'cat_name',
                chlidrem: 'chlidren'
              }"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
        </el-form>

        <!-- 按钮区 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="isAddCateDialogShow = false">取 消</el-button>
          <el-button type="primary" @click="addCate">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 添加分类是,父分类下拉框数据数组
      selectedCates: {},
      // 添加分类是,父分类下拉框数据数组
      AddcateList: [],
      // 添加类别用的表单数据对象
      addCateForm: {
        // 要添加分类的名称
        cat_name: '',
        // 父级分类的id
        cat_pid: 0,
        // 分类的等级,默认为一级分类
        cat_level: 0
      },
      // 添加类别用的规则对象
      addCateRules: {
        // 分类名称 规则 (不能为空,限制字符长度)
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 2, max: 7, message: '长度在 2 到 7 个字符', trigger: 'blur' }
        ]
      },
      //控制添加分类对话框显示隐藏开关
      isAddCateDialogShow: false,
      // 查询对象参数
      queryData: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      // 分类数组
      cateList: [],
      //总数据行数
      total: 0,
      // 表格列定义
      cols: [
        { label: '分类名称', prop: 'cat_name' },
        {
          label: '是否有效',
          // 当前定义为模板列
          type: 'template',
          // 当前定义为模板名称
          template: 'isOk'
        },
        {
          label: '排序',
          // 当前定义为模板列
          type: 'template',
          // 当前定义为模板名称
          template: 'order'
        },
        {
          label: '操作',
          // 当前定义为模板列
          type: 'template',
          // 当前定义为模板名称
          template: 'opt'
        }
      ]
    }
  },
  // 钩子函数(可以看做 vue组件的"入口函数"")
  created() {
    this.getCateList()
  },
  methods: {
    // 6.新增分类 确认按钮函数
    addCate() {
      // a.调用表单对象校验
      this.$refs.formAddCate.validate(async result => {
        // b.如果校验失败,则停止执行
        if (!result) return
        // c.发送异步请求,将表单数据提交给接口
        let { data: resData } = await this.$http.post(
          'categories',
          this.addCateForm
        )
        // d.如果失败
        if (resData.meta.status != 201)
          return this.$message.error(resData.meta.msg)
        // e.如果成功
        // e.2关闭对话框
        this.isAddCateDialogShow = false
        // e3.更新分类表格(是否需要每次新增都更新整个表格)
        // 优化请求方案
        // x1.如果当前页码是最后一页,则调用 getCateList()  方法重新加载当前页数据
        const totalPage = Math.ceil(this.total / this.queryData.pagesize)
        if (this.queryData.pagenum == totalPage) {
          this.getCateList()
        } else {
          // x2.如果当前页码不是最后一页,则不需要重复请求当前页数据
          // 只需要修改total实现页码重新计算
          // 注意:只有添加的一级分类是,才需要 total+1
          if (this.addCateForm.cat_level == 0) this.total++
          // x2.2 添加的是 二级三级菜单 则重新请求当前页数据
          else {
            this.getCateList()
          }
        }

        // e.1 重置表单数据
        this.resetCateForm()
      })
    },
    // 5.重置新增分类表单
    resetCateForm() {
      // a.清空文本框(双向数据绑定)
      this.addCateForm.cat_name = ''
      // b. 重置表单数据的级别和父分类id
      this.addCateForm.cat_level = 0
      this.addCateForm.cat_pid = 0
      // c.重置父级分类下拉框
      this.selectedCates = []
    },
    // 5.新增分类, 确认按钮函数
    handleChange() {
      // a.每次分类选项发生改变是,更新表单数据
      // a1.如果没有选择父分类,说明添加的是[一级分类]
      if (this.selectedCates.length == 0) {
        this.addCateForm.cat_pid = 0
        this.addCateForm.cat_level = 0
      }
      // a2.如果选择 一个父分类,说明添加的是[二级分类]
      else if (this.selectedCates.length == 1) {
        this.addCateForm.cat_pid = this.selectedCates[0]
        this.addCateForm.cat_level = 1
      }
      // a3.如果选择 两个父分类,说明添加的是[三级分类]
      else if (this.selectedCates.length == 2) {
        this.addCateForm.cat_pid = this.selectedCates[1]
        this.addCateForm.cat_level = 2
      }
    },
    // 4. 显示新增分类对话框,并加载父级分类数据
    async showAddCateDialog() {
      // 显示新增分类对话框
      this.isAddCateDialogShow = true
      // 加载父级分类数据
      let { data: resData } = await this.$http.get('categories', {
        params: { type: 2 }
      })
      // 如果加载失败
      if (resData.meta.status != 200)
        return this.$message.error(resData.meta.msg)
      // 如果加载成功
      this.AddcateList = resData.data
    },
    // 3.页码发声改变时间函数
    handleCurrentChange(curPageIndex) {
      // a.修改查询参数中的当前页码
      this.queryData.pagenum = curPageIndex
      // b.重新查询分页数据
      this.getCateList()
    },
    // 2.页容量改变事件函数
    handleSizeChange(newSize) {
      // a.修改查询参数中的页容量
      this.queryData.pagesize = newSize
      // b.重新查询分页数据
      this.getCateList()
    },
    async getCateList() {
      // 1.获取分类列表数据
      let { data: resData } = await this.$http.get('categories', {
        params: this.queryData
      })
      // 1.2判断是否失败
      if (resData.meta.status != 200)
        return this.$message.error(resData.meta.msg)
      // 1.3如果成功
      // a.保存总数据行数
      this.total = resData.data.total
      // b.保存分类数组

      this.cateList = resData.data.result
    }
  }
}
</script>
<style lang="less" scoped>
.TreeTable {
  margin: 15px;
}
.el-cascader {
  width: 100%;
}
</style>
